<%= include ic/header.html %>
<style>
#nav_my{color:#fff}
body{background:#f7f7f7;}
footer{display:none;}
#main{text-align:center;height:100%;overflow:hidden;}
#content{width:100%;margin:auto;overflow:hidden;}
@media only screen and (min-width: 1008px){
  #content{width:80%;min-width:1008px;}
}
#content .step{height:100%;}
#step2{padding-top:20px;}
#imagedata{padding:0;}
#imagedata .am-form-group{height:50px;line-height:50px;background:#111;margin-bottom:2px;color:#eee;text-align:left;position:relative}
#imagedata .am-form-group .label{width:30%;padding-left:5%;margin:0;border-right:1px solid #ccc;line-height:40px;}
#imagedata .am-form-group .select{width:68%;height:50px;line-height:50px;background:#111;border:0;margin:0;position:absolute;top:0;right:0;cursor:pointer;}
#imagedata .am-form-group .select:focus{outline:0px;}
#imagedata .am-checkbox{text-align:left;font-size:1.6rem;line-height:2rem;}
#imagedata .am-checkbox label input{margin-top:6px;}
#btnDone{height:40px;padding:0 40px;background:#111;line-height:40px;color:#fff;border-radius:20px;float:right;margin:20px 0;cursor:pointer;}
#ctrlBar span{height:60px;line-height:70px;float:left;padding-left:15px;}
#ctrlBar span a{color:#444;font-size:2rem;}
</style>
<div id="main" class="am-cf">
<div id="content">
  <div id="step2" class="step am-g ml15-2">
    <div id="btnBack"><a href="javascript:history.go(-1);"><i class="am-icon-caret-left"></i> BACK</a></div>
    <div class="am-cf"></div>
    <div id="imagedata" class="am-u-sm-12 am-u-md-6">
      <form method="post" action="/my/photo/edit" id="my-form">
      <input id="data-imgs" type="hidden" name="ids" value="<%= imgs %>">
      <input id="data-album" type="hidden" name="album" value="<%= album %>">
      <div class="am-form-group">
        <label for="val-airline" class="label">Airline*</label>
        <select id="val-airline" name="airline" class="select">
          <option value="" selected></option>
          <% if(tag && tag.Airline){ %>
          <% for(var i=0;i<tag.Airline.length;i++){ %>
          <option value="<%= tag.Airline[i] %>" <% if(tag.Airline[i]==result.get("airline")){ %>selected<% } %>><%= tag.Airline[i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-form-group">
        <label for="val-acType" class="label">A/C Type*</label>
        <select id="val-acType" name="acType" class="select">
          <option value="" selected></option>
          <% if(tag && tag['A/C Type']){ %>
          <% for(var i=0;i<tag['A/C Type'].length;i++){ %>
          <option value="<%= tag['A/C Type'][i] %>" <% if(tag['A/C Type'][i]==result.get("acType")){ %>selected<% } %>><%= tag['A/C Type'][i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-form-group">
        <label for="val-classes" class="label">Class*</label>
        <select id="val-classes"  name="classes" class="select">
          <option value="" selected></option>
          <% if(tag && tag['Class']){ %>
          <% for(var i=0;i<tag['Class'].length;i++){ %>
          <option value="<%= tag['Class'][i] %>"<% if(tag['Class'][i]==result.get("classes")){ %> selected<% } %>><%= tag['Class'][i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-form-group">
        <label for="val-flightNo" class="label">Flight No.</label>
        <select id="val-flightNo" name="flightNo" class="select">
          <option value="" selected></option>
          <% if(tag && tag['Flight No.']){ %>
          <% for(var i=0;i<tag['Flight No.'].length;i++){ %>
          <option value="<%= tag['Flight No.'][i] %>"<% if(tag['Flight No.'][i]==result.get("flightNo")){ %> selected<% } %>><%= tag['Flight No.'][i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-form-group">
        <label for="val-from" class="label">From</label>
        <select id="val-from"  name="from" class="select">
          <option value="" selected></option>
          <% if(tag && tag['Airport']){ %>
          <% for(var i=0;i<tag['Airport'].length;i++){ %>
          <option value="<%= tag['Airport'][i] %>"<% if(tag['Airport'][i]==result.get("from")){ %> selected<% } %>><%= tag['Airport'][i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-form-group">
        <label for="val-to" class="label">To</label>
        <select id="val-to" name="to" class="select">
          <option value="" selected></option>
          <% if(tag && tag['Airport']){ %>
          <% for(var i=0;i<tag['Airport'].length;i++){ %>
          <option value="<%= tag['Airport'][i] %>"<% if(tag['Airport'][i]==result.get("to")){ %> selected<% } %>><%= tag['Airport'][i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      </form>
      <div class="am-cf"></div>
      <div class="am-cf">
        <div id="btnDone" onclick="update()">Done</div>
      </div>
      <div class="am-cf"></div>
    </div>
  </div>
</div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
var fileArr=[],album,imageArr=[];
var airline,acType,classes,flightNo,from,to;
$(function() {
  $("#step1").css("height",$("body").height()
    - $(".am-topbar").height()*2+"px");
  $(window).resize(function(){
    $("#step1").css("height",$("body").height()
      - $(".am-topbar").height()*2+"px");
  });
});

function update(){
  airline   = $("#val-airline").val();
  acType    = $("#val-acType").val();
  classes   = $("#val-classes").val();
  flightNo  = $("#val-flightNo").val();
  from      = $("#val-from").val();
  to        = $("#val-to").val();

  if(!airline || airline.length==0){
    mAlert({title:"Tips",text:"【Airline】 is required!"})
  }else if(!acType || acType.length==0){
    mAlert({title:"Tips",text:"【A/C Type】 is required!"})
  }else if(!classes || classes.length==0){
    mAlert({title:"Tips",text:"【Class】 is required!"})
  }else{
    $("#my-form").submit();
  }
}
</script>
